<template>
	<view class="area_main">
		<u-navbar
		title="选择地区" 
		back-icon-color="#ffffff"
		title-color="#ffffff"
		title-size="34"
		:border-bottom="false"
		:background="background"></u-navbar>
		<view class="content">
			<view class="area_titel">
				热门城市
			</view>
			<view class="tags">
				<text :class="{active:area==='北京'}" @tap="itemClick('北京')">北京</text>
				<text :class="{active:area==='广州'}" @tap="itemClick('广州')">广州</text>
			</view>
			<view class="area_titel">
				B
			</view>
			<view class="tags">
				<text :class="{active:area==='北京'}" @tap="itemClick('北京')">北京</text>
			</view>
			<view class="area_titel">
				C
			</view>
			<view class="tags">
				<text :class="{active:area==='常州'}" @tap="itemClick('常州')">常州</text>
			</view>
		</view>
		<view class="btn">
			<button>重置</button>
			<button>确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		components:{
			
		},
		data() {
			return {
				background: {
					backgroundColor:"#4A90E2"
				},
				area:'北京'
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods: {
			// 选择城市
			itemClick(e){
				this.area = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.area_main{
		padding: 0 30rpx;
		.content{
			padding-bottom: 150rpx;
			.area_titel{
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				margin-top: 30rpx;
			}
			.tags{
				margin: 20rpx 0 50rpx 0;
				text{
					padding: 12rpx 24rpx;
					background: #F9F9F9;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					display: inline-block;
					margin-right: 30rpx;
					margin-bottom: 20rpx;
					border: 1px solid #F9F9F9;
				}
				.active{
					background: #FFFFFF;
					border: 1px solid #4A90E2;
					color: #4A90E2;
				}
			}
		}
		.btn{
			width: 100%;
			display: flex;
			justify-content: space-between;
			position: fixed;
			left: 0;
			bottom: 0;
			padding: 0 30rpx;
			padding-bottom: 46rpx;
			background-color: #ffffff;
			button{
				width: 331rpx;
				height: 100rpx;
				background: #F9F9F9;
				border-radius: 50rpx;
				font-size: 34rpx;
				line-height: 100rpx;
				font-weight: 400;
				color: #333333;
				&::after{
					border: none;
				}
			}
			button:last-child{
				background: #4A90E2;
				color: #FFFFFF;
			}
		}
	}
	
</style>
